<template>
  <div class="home-wrapper">
    <v-header/>
    <v-search @searchGoodsName="searchGoodsNameFn"/>
    <v-nav @where="whereFn"/>
    <keep-alive exclude="posts">
    <component :is="currentTabComponent" :categoryId="categoryId" :goodsWhere="goodsWhere" :searchGoodsName="searchGoodsName"></component>
<!--    <router-view :categoryId="categoryId" :searchGoodsName="searchGoodsName"/>-->
    </keep-alive>
    <v-footer/>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      categoryId: '',
      searchGoodsName: '',
      currentTabComponent: 'v-goods-list',
      goodsWhere: {},
    }
  },
  components: {
    'v-header': () => import("@/components/common/header/header"),
    'v-nav': () => import("@/components/common/nav/nav"),
    'v-footer': () => import("@/components/common/footer/footer"),
    'v-search': () => import("@/components/common/search/search"),
    'v-goods-list': () => import("@/components/goods/list"),
    'v-goods-info': () => import("@/components/goods/info"),
  },
  created() {
    if(this.$route.query.web == 'info'){
      this.currentTabComponent = 'v-goods-info';
    }
    if(this.$route.query.web == 1){
      this.currentTabComponent = 'v-goods-info';
    }
  },
  methods:{
    whereFn(value){
      this.currentTabComponent = 'v-goods-list';
      this.goodsWhere = value;
    },
    searchGoodsNameFn(searchGoodsName){
      this.currentTabComponent = 'v-goods-list';
      this.searchGoodsName = searchGoodsName;
    }

  }
}
</script>

<style scoped>
</style>